<template>
  <!--测试 rangeRef -->2233
  <el-cascader
    v-model="val4"
    :options="options"
    :props="cprops"
    @change="handleChange"
  />
  <br>
  ({{model}})
</template>

<script lang="ts">
  import { defineComponent, reactive, watch } from 'vue'
  import type { PropType } from 'vue'

  import rangeRef from '../../../../lib/base/ref-model-range'
  import range2Ref from '../../../../lib/base/ref-model-range2'
 
  interface DateRange {
    d1: string,
    d2: string,
    d3: string
  }


  const options = [
    {
      value: 'guide',
      label: 'Guide',
      children: [
        {
          value: 'disciplines',
          label: 'Disciplines',
          children: [
            {
              value: 'consistency',
              label: 'Consistency'
            },
            {
              value: 'feedback',
              label: 'Feedback'
            }
          ]
        },
        {
          value: 'navigation',
          label: 'Navigation',
          children: [
            {
              value: 'side nav',
              label: 'Side Navigation'
            },
            {
              value: 'top nav',
              label: 'Top Navigation'
            },
          ],
        },
      ],
    },
    {
      value: 'component',
      label: 'Component',
      children: [
        {
          value: 'basic',
          label: 'Basic',
          children: [
            {
              value: 'layout',
              label: 'Layout'
            },
            {
              value: 'color',
              label: 'Color'
            }
          ]
        },
        {
          value: 'form',
          label: 'Form',
          children: [
            {
              value: 'radio',
              label: 'Radio'
            },
            {
              value: 'checkbox',
              label: 'Checkbox'
            } 
          ]
        },
        {
          value: 'data',
          label: 'Data',
          children: [
            {
              value: 'table',
              label: 'Table'
            },
            {
              value: 'tag',
              label: 'Tag'
            }
          ]
        },
        {
          value: 'notice',
          label: 'Notice',
          children: [
            {
              value: 'alert',
              label: 'Alert'
            },
            {
              value: 'loading',
              label: 'Loading'
            }
          ]
        },
        {
          value: 'navigation',
          label: 'Navigation',
          children: [
            {
              value: 'menu',
              label: 'Menu'
            },
            {
              value: 'tabs',
              label: 'Tabs'
            }
          ]
        },
        {
          value: 'others',
          label: 'Others',
          children: [
            {
              value: 'dialog',
              label: 'Dialog'
            },
            {
              value: 'tooltip',
              label: 'Tooltip'
            }
          ]
        }
      ]
    },
    {
      value: 'resource',
      label: 'Resource',
      children: [
        {
          value: 'axure',
          label: 'Axure Components'
        },
        {
          value: 'sketch',
          label: 'Sketch Templates'
        },
        {
          value: 'docs',
          label: 'Design Documentation'
        }
      ]
    }
  ]

  export default defineComponent({
    name: 'nf-demo-base-range',
    props: {
      model: {
        type: Object as PropType<DateRange>,
        default: () => {
          return {
            name: '没有赋值'
          }
        }
      },
      colName: {
        type: [String],
        default: 'd1_d2_d3'
      }
    },
    setup(props, context) {

      const arrColName = props.colName.split('_')
      const val0 = rangeRef(props.model, ['d1', 'd2', 'd3'])
      const val = rangeRef<DateRange>(props.model, ['d1', 'd2', 'd3'])
      const val2 = rangeRef(props.model, arrColName) // 
      const val3 = range2Ref(props.model, 'd1', 'd2', 'd3') // 
      const val4 = range2Ref(props.model, ...arrColName) // 

      const cprops = {
        expandTrigger: 'hover',
      }

      const handleChange = (value: Array<any>) => {
        console.log(value)
      }
      return {
        cprops,
        handleChange,
        options,
        val2,
        val3,
        val4
      }
    }
  })
</script>